<template>
	<view class="recharge">
		<view class="nav u-flex-content-around">
			<v-tabs v-model="current" :tabs="tabs" @change="changeTab" activeColor="#FD2A53"
				lineColor="#FD2A53"></v-tabs>
		</view>

		<view class="content">

			<view class="vip" v-if="current == 3">
				<view class="mobile_input flex_center">
					<view class="input flex_center">
						<input v-model="mobile" type="number" maxlength="11" placeholder="输入用户ID查询"
							placeholder-class="placeholder" />
						<u-button plain color="#FD2A53" class="custom-style" @click="showLessModal(1)">查询</u-button>
					</view>
				</view>

				<view class="user_card" v-if="user.id">
					<view class="user_card_header flex_center">
						<view class="avatar">
							<image :src="user.avatar" mode="aspectFill"></image>
						</view>
						<view class="name">
							<view class="top flex_center">
								<view class="hidden">{{ user.nickname || '' }}</view>
								<text class="hidden">ID:{{ user.id || '' }}</text>
							</view>
							<view class="bottom flex_center">
								<text class="hidden">
									{{ user.fans_num || 0 }}<i>粉丝</i>
								</text>
								<text class="hidden">
									{{ user.follow_num || 0 }}<i>关注</i>
								</text>
							</view>
						</view>
					</view>
					<view class="age flex_center">
						<view class="tag flex_center">
							<image :src="`/static/public/sex_white_${user.gender == 0 ? 'woman' : 'man'}.png`"
								mode="aspectFill"></image>
							<text>{{ user.age || 18 }}岁</text>
						</view>
						<view class="ip">
							IP属地：{{ user.city || '未知' }}
						</view>
					</view>
					<view class="sign hidden_3">
						{{ user.sign || 'Ta什么也没有留下~' }}
					</view>
				</view>

				<view style="height: 30rpx;"></view>

				<view class="config flex_center">
					<view class="item flex_c" v-for="(item,index) in vip_config" :key="index"
						@click="onChooseVip(index)" :id="item.id == vip_config_id ? 'select' : ''">
						<view class="name">{{item.name}}</view>
						<view class="price"><i>￥</i>{{Math.floor(item.price)}}</view>
						<view class="day">{{(item.price / item.day * 30).toFixed(2)}}元/月</view>
					</view>
				</view>

				<view class="rich_text">
					<view class="rich_title">VIP会员{{vip_list.length}}项权益</view>
					<view class="rich_content flex_c">
						<view class="item flex_center" v-for="(item,index) in vip_list" :key="index">
							<image :src="$util.prefix(`store/${item.icon}.png`)" mode="aspectFill"></image>
							<text>{{item.text}}</text>
						</view>
					</view>
				</view>

				<view class="pay_type">
					<!-- <view class="pay_type_title">支付方式</view> -->
					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信支付</text>
						</view>
						<image class="right" src="/static/public/select_s.png" v-if="pay_type == 1"></image>
						<image class="right" src="/static/public/select.png" v-else></image>
					</view>
					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝支付</text>
						</view>
						<image class="right" src="/static/public/select_s.png" v-if="pay_type == 2"></image>
						<image class="right" src="/static/public/select.png" v-else></image>
					</view>
				</view>

				<view class="btn_box flex_r_between">
					<view class="left flex_center">
						<text>需要支付:</text>
						<view>{{ vip_price }} 元</view>
					</view>
					<view class="btn_submit" @click="vipPay">确认支付</view>
				</view>
			</view>

			<view class="box_jinbi" v-if="current == 0">
				<view class="mobile_input flex_center">
					<view class="input flex_center">
						<input v-model="mobile" type="number" maxlength="11" placeholder="输入用户ID查询"
							placeholder-class="placeholder" />
						<u-button plain color="#FD2A53" class="custom-style" @click="showLessModal(1)">查询</u-button>
					</view>
				</view>

				<view class="user_card" v-if="user.id">
					<view class="user_card_header flex_center">
						<view class="avatar">
							<image :src="user.avatar" mode="aspectFill"></image>
						</view>
						<view class="name">
							<view class="top flex_center">
								<view class="hidden">{{ user.nickname || '' }}</view>
								<text class="hidden">ID:{{ user.id || '' }}</text>
							</view>
							<view class="bottom flex_center">
								<text class="hidden">
									{{ user.fans_num || 0 }}<i>粉丝</i>
								</text>
								<text class="hidden">
									{{ user.follow_num || 0 }}<i>关注</i>
								</text>
							</view>
						</view>
					</view>
					<view class="age flex_center">
						<view class="tag flex_center">
							<image :src="`/static/public/sex_white_${user.gender == 0 ? 'woman' : 'man'}.png`"
								mode="aspectFill"></image>
							<text>{{ user.age || 18 }}岁</text>
						</view>
						<view class="ip">
							IP属地：{{ user.city || '未知' }}
						</view>
					</view>
					<view class="sign hidden_3">
						{{ user.sign || 'Ta什么也没有留下~' }}
					</view>
				</view>

				<view style="height: 30rpx;"></view>
				<view class="jinbi_content flex_r_between">
					<view class="grid_item flex_c" v-for="(item,index) in jinbi_config" :key="index"
						@click="jinbiConfigChoose(index)" :id="jinbi_config_id == item.id ? 'select' : ''">
						<view class="num">
							<image src="/static/recharge/gold_coins.png"></image>
							<text>{{item.jinbi_num}}</text>
						</view>
						<view class="btn">￥{{ Number(item.price).toFixed(2) }}</view>
					</view>
				</view>
				
				<view class="jinbi-input">
					<input type="number" placeholder-class="input-placeholder" placeholder="请输入自定义金额" v-model="jinbi_price_input" @input="onJinbiPriceChange" />
				</view>

				<view class="pay_type">
					<!-- <view class="pay_type_title">支付方式</view> -->
					<!-- <view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信支付</text>
						</view>
						<image class="right" src="/static/public/select_s.png" v-if="pay_type == 1"></image>
						<image class="right" src="/static/public/select.png" v-else></image>
					</view> -->
					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝支付</text>
						</view>
						<image class="right" src="/static/public/select_s.png" v-if="pay_type == 2"></image>
						<image class="right" src="/static/public/select.png" v-else></image>
					</view>
				</view>


				<view class="btn_box flex_r_between">
					<view class="left flex_center">
						<text>需要支付:</text>
						<view>{{ Number(jinbi_price).toFixed(2) }} 元</view>
					</view>
					<view class="btn_submit" @click="showLessModal(2)">确认支付</view>
				</view>
			</view>

			<view class="box_jinbi" v-if="current == 2">
				<view class="mobile_input flex_center">
					<view class="input flex_center">
						<input v-model="mobile" type="number" maxlength="11" placeholder="输入手机号充值"
							placeholder-class="placeholder" />
						<u-button plain color="#FD2A53" class="custom-style" @click="showLessModal(1)">查询</u-button>
					</view>
				</view>

				<view class="user_card" v-if="user.id">
					<view class="user_card_header flex_center">
						<view class="avatar">
							<image :src="user.avatar" mode="aspectFill"></image>
						</view>
						<view class="name">
							<view class="top flex_center">
								<view class="hidden">{{ user.nickname || '' }}</view>
								<text class="hidden">ID:{{ user.id || '' }}</text>
							</view>
							<view class="bottom flex_center">
								<text class="hidden">
									{{ user.fans_num || 0 }}<i>粉丝</i>
								</text>
								<text class="hidden">
									{{ user.follow_num || 0 }}<i>关注</i>
								</text>
							</view>
						</view>
					</view>
					<view class="age flex_center">
						<view class="tag flex_center">
							<image :src="`/static/public/sex_white_${user.gender == 0 ? 'woman' : 'man'}.png`"
								mode="aspectFill"></image>
							<text>{{ user.age || 18 }}岁</text>
						</view>
						<view class="ip">
							IP属地：{{ user.city || '未知' }}
						</view>
					</view>
					<view class="sign hidden_3">
						{{ user.sign || 'Ta什么也没有留下~' }}
					</view>
				</view>

				<view style="height: 30rpx;"></view>
				<view class="jinbi_content flex_r_between">
					<view class="grid_item flex_c" v-for="(item,index) in ledou_config" :key="index"
						@click="ledouConfigChoose(index)" :id="ledou_config_id == item.id ? 'select' : ''">
						<view class="num">
							<image src="/static/recharge/gold_count.png"></image>
							<text>{{item.ledou_num}}</text>
						</view>
						<view class="btn">￥{{item.price}}</view>
					</view>
				</view>

				<view class="pay_type">
					<!-- <view class="pay_type_title">支付方式</view> -->
					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信支付</text>
						</view>
						<image class="right" src="/static/public/select_s.png" v-if="pay_type == 1"></image>
						<image class="right" src="/static/public/select.png" v-else></image>
					</view>
					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝支付</text>
						</view>
						<image class="right" src="/static/public/select_s.png" v-if="pay_type == 2"></image>
						<image class="right" src="/static/public/select.png" v-else></image>
					</view>
				</view>


				<view class="btn_box flex_r_between">
					<view class="left flex_center">
						<text>需要支付:</text>
						<view>{{ledou_price}} 元</view>
					</view>
					<view class="btn_submit" @click="ledouPay">确认支付</view>
				</view>
			</view>

			<view class="popularize" v-if="current == 1" :style="`padding-bottom: ${show ? '50vh' : '0'};`">
				<view class="mobile_input flex_center">
					<view class="input flex_center">
						<input v-model="mobile" type="number" maxlength="11" placeholder="输入手机号充值"
							placeholder-class="placeholder" />
						<u-button plain color="#FD2A53" class="custom-style" @click="showLessModal(1)">查询</u-button>
					</view>
				</view>

				<view class="user_card" v-if="user.id">
					<view class="user_card_header flex_center">
						<view class="avatar">
							<image :src="user.avatar" mode="aspectFill"></image>
						</view>
						<view class="name">
							<view class="top flex_center">
								<view class="hidden">{{ user.nickname || '' }}</view>
								<text class="hidden">ID:{{ user.id || '' }}</text>
							</view>
							<view class="bottom flex_center">
								<text class="hidden">
									{{ user.fans_num || 0 }}<i>粉丝</i>
								</text>
								<text class="hidden">
									{{ user.follow_num || 0 }}<i>关注</i>
								</text>
							</view>
						</view>
					</view>
					<view class="age flex_center">
						<view class="tag flex_center">
							<image :src="`/static/public/sex_white_${user.gender == 0 ? 'woman' : 'man'}.png`"
								mode="aspectFill"></image>
							<text>{{ user.age || 18 }}岁</text>
						</view>
						<view class="ip">
							IP属地：{{ user.city || '未知' }}
						</view>
					</view>
					<view class="sign hidden_3">
						{{ user.sign || 'Ta什么也没有留下~' }}
					</view>
				</view>

				<view style="height: 30rpx;"></view>
				<view class="header" @click="popup = true">
					<view class="title">支付方式</view>
					<view class="pay_type_pop flex_r_between">
						<view class="left flex_center">
							<image :src="`/static/public/${pay_type == 1 ? 'wechat' : 'alipay'}.png`">
							</image>
							<text>{{pay_type == 1 ? '微信' : '支付宝'}}支付</text>
						</view>
						<u-icon name="arrow-right" color="#666666" size="24rpx"></u-icon>
					</view>
				</view>

				<view class="pop_content">
					<view class="title">支付方式</view>
					<view class="input flex_center" @click="show = true">
						<text>￥</text>
						<i class="line"></i>
						<view :id="money ? '' : 'input-class'">
							{{money || '充值金额'}}
						</view>
					</view>
				</view>
			</view>

		</view>

		<mono-keyboard :btnColor="pay_type == 1 ? '#07C160' : '#009FE8'" confirmText="充值" :show="show" @change="change"
			@confirm="confirm">
		</mono-keyboard>

		<u-popup :safeAreaInsetBottom="false" :show="popup" mode="bottom" @close="popup = false">
			<view class="pay_type_choose">
				<view class="title">选择支付方式</view>
				<view class="pay_type_content">

					<view class="list flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png" mode="aspectFill"></image>
							<text>微信支付</text>
						</view>
						<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
					</view>

					<view class="list flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png" mode="aspectFill"></image>
							<text>支付宝支付</text>
						</view>
						<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
					</view>

				</view>

				<view class="btn" @click="popup = false">确认</view>
			</view>
		</u-popup>

		<u-popup :safeAreaInsetBottom="false" :show="mobile_model" mode="center" @close="mobile_model = false"
			bgColor="transparent">
			<view class="mobile_model flex_c">
				<view class="icon">
					<image :src="$util.prefix('public/err_icon.png')"></image>
				</view>

				<view class="model_content flex_c">
					<view class="text">请确认信息</view>
					<view class="info flex_c">
						<view class="avatar">
							<image :src="user.avatar" mode="aspectFill"></image>
						</view>
						<view class="nickname">
							{{ user.nickname || '' }}
						</view>

						<!-- <view class="id_text flex_center">
							<text>手机号</text>
							<view>{{ mobile || '' }}</view>
						</view> -->
						<view class="id_text flex_center">
							<text>ID</text>
							<view>{{ user.id || '' }}</view>
						</view>
					</view>
					
					<view class="model_btn flex_r_around">
						<view class="model_btn_child cancel" @click="mobile_model = false">
							取消
						</view>
						<view class="model_btn_child submit" @click="submitPay">
							确定充值
						</view>
					</view>
				</view>

			</view>
		</u-popup>
		
		<u-popup :safeAreaInsetBottom="false" :show="modal_less" mode="center" @close="modal_less = false"
			bgColor="transparent">
			<view class="modal_less flex_c">
					
					<view class="modal_less_title">
						请先完成验证
					</view>
				
					<view class="less-code flex_center">
						<jp-verification-literalness ref="literalness" :isCaseCheck="false"></jp-verification-literalness>
						<view class="less-code-input">
							<input type="text" placeholder="请输入" placeholder-class="input-placeholder" v-model="less_code" />
						</view>
					</view>
		
					<view class="model_btn flex_r_around">
						<view class="model_btn_child cancel" @click="modal_less = false">
							取消
						</view>
						<view class="model_btn_child submit" @click="beforeRequest">
							确定
						</view>
					</view>
		
			</view>
		</u-popup>

	</view>

</template>

<script>
	import '@/utils/request.js'
	export default {
		data() {
			return {
				current: 0,

				// tab 配置
				tabs: [
					// 'VIP续费',
					'金币充值',
					// '乐豆充值',
					// '曝光量充值',
				],

				// vip 权益配置问题
				vip_list: [{
						icon: 'vip_icon_1',
						text: '获得创建房间的权限',
					},
					{
						icon: 'vip_icon_2',
						text: '解锁聊天',
					},
					{
						icon: 'vip_icon_3',
						text: '优先推荐，作品曝光提升300%；',
					},
					{
						icon: 'vip_icon_4',
						text: '专属私人客服，反馈极速处理',
					},
					{
						icon: 'vip_icon_5',
						text: 'VIP身份标识',
					},
				],

				// VIP相关
				vip_config: [],
				vip_config_id: 0,
				vip_price: 0,

				// 金币相关
				jinbi_config: [],
				jinbi_config_id: 0,
				jinbi_price: 0,
				jinbi_balance: 0,

				// 乐豆相关
				ledou_balance: 0,
				ledou_config: [],
				ledou_config_id: 0,
				ledou_price: 0,

				// 曝光量充值相关
				popularize_config: [],
				popularize_config_id: 0,
				popularize_price: 0,

				isPay: '',
				order_id: '',

				show: false,
				money: '',

				pay_type: 2,

				popup: false,

				showmodel: false,

				// 充值账号
				mobile: '',
				// 充值账号的用户信息
				user: {
					id: 0,
				},
				// 充值确认弹窗
				mobile_model: false,
				// 1 VIP 2 金币 3 乐豆 4 曝光
				mobile_type: 0,
				
				jinbi_price_input: '',
				
				less_code: '',
				
				modal_less: false,
			}
		},
		methods: {
			changeTab(e) {
				this.show = false;
			},

			getConfig() {

				// VIP 配置
				// this.$post('/vip/getList').then(res => {
				// 	this.vip_config = res.data
				// 	if (this.vip_config.length) {
				// 		this.onChooseVip(0);
				// 	}
				// });

				// 金币配置
				this.$post('/jinbi/getConfig').then(res => {
					this.jinbi_config = res.data;
					if (this.jinbi_config.length) {
						this.jinbiConfigChoose(0);
					}
				});

				// 乐豆配置
				// this.$post('/ledou/getConfig').then(res => {
				// 	this.ledou_config = res.data
				// 	if (this.ledou_config.length) {
				// 		this.ledouConfigChoose(0)
				// 	}
				// });

				// 曝光量充值配置
				// this.$post('/popularize/getPopularizeConfig').then(res => {
				// 	res.data.list.forEach((element) => {
				// 		if (element.id == 6) {
				// 			this.popularize_config = element.child;
				// 		}
				// 	});

				// 	if (this.popularize_config.length) {
				// 		this.onPopularizeChoose(0);
				// 	}
				// })
			},

			// VIP 模块
			onChooseVip(index) {
				this.vip_config_id = this.vip_config[index].id;
				this.vip_price = this.vip_config[index].price;
			},

			// 金币板块
			jinbiConfigChoose(index) {
				// 金币选择
				this.jinbi_config_id = this.jinbi_config[index].id;
				this.jinbi_price = this.jinbi_config[index].price;
				this.jinbi_price_input = '';
			},

			// 获取金币余额
			getBlance() {
				this.$post('/jinbi/getBalance', {}, false).then(res => {
					this.jinbi_balance = res.data.balance;
				})
			},

			// 乐豆板块
			getLedouBlance() {
				this.$post('/ledou/getBalance', {}, false).then(res => {
					this.ledou_balance = res.data.balance;
				})
			},

			// 乐豆选择
			ledouConfigChoose(index) {
				this.ledou_config_id = this.ledou_config[index].id;
				this.ledou_price = this.ledou_config[index].price;
			},

			// 曝光点配置
			onPopularizeChoose(index) {
				this.popularize_config_id = this.popularize_config[index].id;
				this.popularize_price = this.popularize_config[index].price;
			},

			// VIP 支付
			vipPay() {

				if (!this.mobile) {
					return this.$util.msg('请先输入充值账户ID');
				}

				this.$get('/v2.order/getUserInfo', {
					key: this.mobile,
				}).then(res => {
					if (!res.data.id) {
						return this.$util.msg('未查询到该用户，请检查账号是否正确');
					}
					this.user = res.data;
					this.mobile_type = 1;
					this.mobile_model = true;
				})

			},

			subVipPay() {
				uni.showLoading();
				this.$post('/v2.order/createVipOrder', {
					config_id: this.vip_config_id,
					pay_type: this.pay_type,
					type: 2,
					user_id: this.user.id
				}, true, () => {
					uni.hideLoading();
				}).then(res => {
					if (this.pay_type == 1) {
						setTimeout(() => {
							uni.hideLoading();
							window.location.href = res.data.orderInfo;
						}, 200);
					} else {
						uni.hideLoading();
						var el = document.createElement('div');
						el.innerHTML = res.data.orderInfo;
						document.body.appendChild(el);
						el.querySelector('form')?.submit();
					}
				})
			},

			// 金币支付
			jinbiPay() {
				if (!this.mobile) {
					return this.$util.msg('请先输入充值用户ID');
				}
				
				if(!this.jinbi_config_id && (!this.jinbi_price_input || Number(this.jinbi_price_input) <= 0)){
					return this.$util.msg('请选择充值金额');
				}
				
				this.$get('/v2.order/getUserInfo', {
					key: this.mobile,
				}).then(res => {
					if (!res.data.id) {
						return this.$util.msg('未查询到该用户，请检查账号是否正确');
					}
					this.user = res.data;
					this.mobile_type = 2;
					this.mobile_model = true;
				})
			},

			subJinbiPay() {
				
				uni.showLoading();
				this.$post('/v2.order/createJinBiOrder', {
					config_id: this.jinbi_config_id,
					jinbi_price: this.jinbi_price_input,
					pay_price: this.jinbi_config_id != 0 ? this.jinbi_price : '',
					pay_type: 2,
					user_id: this.user.id
				}, true, () => {
					uni.hideLoading();
				}).then(res => {
					this.$post('/hui_fu_pay/pay', {
						type: 3,
						order_id: res.data.order_id.data,
						// pay_type: this.pay_type
						pay_type: this.pay_type,
					}, true, () => {
						uni.hideLoading();
					}).then(pay => {
						if (this.pay_type == 1) {
							setTimeout(() => {
								uni.hideLoading();
								window.location.href = pay.data.orderInfo;
							}, 300)
						} else {
							// uni.hideLoading();
							// var el = document.createElement('div');
							// el.innerHTML = pay.data.orderInfo;
							// document.body.appendChild(el);
							// el.querySelector('form')?.submit();
							setTimeout(() => {
								uni.hideLoading();
								console.log(pay);
								window.location.href = pay.data.qr_code;
							}, 300)
						}
					})
				})
			},

			// 乐豆支付
			ledouPay() {
				if (!this.mobile) {
					return this.$util.msg('请先输入充值手机号');
				}
				this.$get('/v2.order/getUserInfo', {
					key: this.mobile,
				}).then(res => {
					this.user = res.data;
					this.mobile_type = 3;
					this.mobile_model = true;
				});
			},

			subLedouPay() {
				uni.showLoading();
				this.$post('/v2.order/createLeDouOrder', {
					config_id: this.ledou_config_id,
					pay_type: this.pay_type,
					user_id: this.user.id
				}, true, () => {
					uni.hideLoading();
				}).then(res => {
					this.$post('/pay/ledouPay', {
						type: 2,
						order_id: res.data.order_id.data,
						pay_type: this.pay_type
					}, true, () => {
						uni.hideLoading();
					}).then(pay => {
						if (this.pay_type == 1) {
							setTimeout(() => {
								uni.hideLoading();
								window.location.href = pay.data.orderInfo;
							}, 200)
						} else {
							uni.hideLoading();
							var el = document.createElement('div');
							el.innerHTML = pay.data.orderInfo;
							document.body.appendChild(el);
							el.querySelector('form')?.submit();
						}
					})
				})
			},

			subPopularizePay() {
				uni.showLoading();
				this.$post('/v2.order/payPopularizeBalance', {
					pay_type: this.pay_type,
					price: this.money,
					user_id: this.user.id
				}, true, () => {
					uni.hideLoading();
				}).then(order => {
					this.$post('/pay/popularizePm', {
						type: 2,
						order_id: order.data.order_id,
						pay_type: this.pay_type
					}, true, () => {
						uni.hideLoading();
					}).then(pay => {
						if (this.pay_type == 1) {
							setTimeout(() => {
								uni.hideLoading();
								window.location.href = pay.data.orderInfo;
							}, 200)
						} else {
							uni.hideLoading();
							var el = document.createElement('div');
							el.innerHTML = pay.data.orderInfo;
							document.body.appendChild(el);
							el.querySelector('form')?.submit();
						}
					})
				});
			},

			change(e) {
				this.money = e;
			},

			confirm(e) {
				this.show = false;
				if (!this.mobile) {
					return this.$util.msg('请先输入充值手机号');
				}
				this.$get('/v2.order/getUserInfo', {
					key: this.mobile,
				}).then(res => {
					if (!res.data.id) {
						return this.$util.msg('未查询到该用户，请检查账号是否正确');
					}
					this.user = res.data;
					this.mobile_type = 4;
					this.mobile_model = true;
				});
			},

			// 输入手机号获取用户资料
			getMobile() {
				this.$get('/v2.order/getUserInfo', {
					key: this.mobile,
				}).then(res => {
					this.user = res.data;
				})
			},

			// 弹窗之后确认支付流程
			submitPay() {
				if (this.mobile_type == 1) {
					// VIP 充值
					this.subVipPay();
				}

				if (this.mobile_type == 2) {
					this.subJinbiPay();
				}

				if (this.mobile_type == 3) {
					this.subLedouPay();
				}

				if (this.mobile_type == 4) {
					this.subPopularizePay();
				}
			},

			onJinbiPriceChange(){
				this.jinbi_config_id = 0;
				this.jinbi_price = Number(this.jinbi_price_input / 10 || '0').toFixed(2);
			},

			showLessModal(type){
				this.sub_type = type;
				this.modal_less = true;
			},

			beforeRequest(){
				// 1 查询  2 支付
				if(!this.$refs.literalness.verification(this.less_code)){
					this.$refs.literalness.drawTap();
					this.less_code = false;
					return this.$util.msg('验证码有误，请重新输入');
				}
				
				this.less_code = '';
				this.modal_less = false;
				
				if(this.sub_type == 1){
					this.getMobile();
				}
				
				if(this.sub_type == 2){
					this.jinbiPay();
				}
				
			},

		},

		onLoad(option) {

			if (option.token && option.terminal && option.cid) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('terminal', option.terminal);
				uni.setStorageSync('cid', option.cid);
			}

			this.getConfig();

			this.isPay = uni.getStorageSync('isPay') || '';
		},
	}
</script>

<style lang="less" scoped>
	page {
		background: #FFF;
	}

	.mobile_model {

		.icon {
			width: 112rpx;
			height: 112rpx;
			position: relative;
			z-index: 2;

			image {
				width: 112rpx;
				height: 112rpx;
			}
		}

		.model_content {
			margin-top: -56rpx;
			width: 654rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding-bottom: 48rpx;

			.text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				margin: 80rpx 0 24rpx;
			}

			.info {
				width: 606rpx;
				background: #FFEAEE;
				border-radius: 32rpx;
				padding: 40rpx 0;

				.avatar {
					width: 136rpx;
					height: 136rpx;
					border-radius: 68rpx;
					border: 12rpx solid #FFF;

					image {
						width: 112rpx;
						height: 112rpx;
						border-radius: 56rpx;
					}
				}

				.nickname {
					font-weight: 500;
					font-size: 36rpx;
					color: #131313;
					line-height: 50rpx;
					margin: 20rpx 0 20rpx;
				}

				.id_text {
					margin: 10rpx 0;

					text {
						font-size: 32rpx;
						color: #666666;
						line-height: 24rpx;
						margin-right: 12rpx;
					}

					view {
						font-weight: 500;
						font-size: 32rpx;
						color: #131313;
						line-height: 32rpx;
					}

				}

			}

			.model_btn {
				width: 606rpx;
				margin-top: 36rpx;

				.model_btn_child {
					width: 248rpx;
					height: 88rpx;
					border-radius: 44rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 28rpx;
				}

				.cancel {
					background: #F1F1F1;
					color: #333333;
				}

				.submit {
					background: #FD2A53;
					color: #FFF;
				}
			}
		}

	}

	.mobile_input {
		width: 686rpx;
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 20rpx 0rpx 0rpx #FD2A53;
		border-radius: 24rpx;
		border: 2rpx solid #FD2A53;
		padding: 0 40rpx;
		position: relative;
		top: 1;

		.input {
			width: 100%;
			border-bottom: 2rpx solid #F1F1F1;

			input {
				flex: 1;
				margin-right: 20rpx;
				font-size: 44rpx;
				color: #333;
				line-height: 60rpx;
			}

			.placeholder {
				color: #DDDDDD;
				font-size: 44rpx;
				line-height: 60rpx;
			}

			.custom-style {
				width: 180rpx;
			}
		}
	}

	.user_card {
		width: 686rpx;
		background: #FFF7F8;
		border-radius: 24rpx;
		border: 2rpx solid #FFDEE5;
		padding: 32rpx 34rpx;
		margin-top: 32rpx;

		.user_card_header {
			.avatar {
				width: 112rpx;
				height: 112rpx;
				margin-right: 16rpx;

				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 56rpx;
				}
			}

			.name {
				.top {
					view {
						max-width: 400rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #131313;
						line-height: 40rpx;
					}

					text {
						font-size: 26rpx;
						color: #333333;
						line-height: 36rpx;
						margin-left: 12rpx;
					}
				}

				.bottom {
					text {
						font-weight: 600;
						font-size: 32rpx;
						color: #131313;
						margin-right: 32rpx;

						i {
							font-size: 28rpx;
							color: #131313;
							font-weight: 400;
							font-style: normal;
						}
					}
				}
			}
		}

		.age {
			margin: 24rpx 0;

			.tag {
				background: #FD2A53;
				border-radius: 24rpx;
				padding: 0 8rpx;
				height: 36rpx;

				image {
					width: 22rpx;
					height: 22rpx;
				}

				text {
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					margin-left: 6rpx;
				}

			}

			.ip {
				font-size: 24rpx;
				color: #666666;
				line-height: 20rpx;
				margin-left: 16rpx;
			}
		}

		.sign {
			font-size: 24rpx;
			color: #666666;
			line-height: 32rpx;
		}

	}

	.nav {
		height: 44px;
		position: fixed;
		width: 100vw;
		box-sizing: border-box;
		z-index: 99;

		/deep/ .v-tabs {
			width: auto;
		}
	}

	.vip {
		padding: 54px 32rpx 140rpx;
		min-height: 100vh;

		.config {
			padding: 0 20rpx;
			flex-wrap: wrap;

			.item {
				margin: 11rpx;
				background: url(https://qiniu-cdn.maeiyun.com//h5static/store/vip_config_bg.png) 0 0 no-repeat;
				width: 192rpx;
				height: 224rpx;
				border-radius: 24rpx;
				background-size: 100%;
				border: 4rpx solid #EEEEEE;
				padding-bottom: 30rpx;
				justify-content: space-between;

				.name {
					font-weight: 500;
					font-size: 24rpx;
					color: #431B29;
					line-height: 24rpx;
				}

				.price {
					font-weight: 600;
					font-size: 48rpx;
					color: #333333;

					i {
						font-size: 24rpx;
						font-style: normal;
					}
				}

				.day {
					font-size: 24rpx;
					color: #482123;
				}
			}

			#select {
				background: url(https://qiniu-cdn.maeiyun.com//h5static/store/vip_config_bg_s.png) 0 0 no-repeat;
				background-size: 100%;
				border: 4rpx solid transparent;
			}
		}

		.rich_text {
			margin-top: 20rpx;

			.rich_title {
				font-weight: 600;
				font-size: 32rpx;
				color: #131313;
				margin-bottom: 20rpx;
			}

			.rich_content {
				background: #FCF7F2;
				border-radius: 32rpx;
				height: 688rpx;
				padding: 40rpx 34rpx;
				justify-content: space-between;
				align-items: flex-start;

				.item {

					image {
						width: 96rpx;
						height: 96rpx;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					text {
						font-size: 28rpx;
						color: #482123;
						line-height: 40rpx;
					}
				}
			}
		}

		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 140rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(230, 230, 230, 0.5);
			padding: 12rpx 32rpx 32rpx;

			.left {
				text {
					font-weight: 500;
					font-size: 32rpx;
					color: #131313;
				}

				view {
					font-weight: 600;
					font-size: 32rpx;
					color: #FD2A53;
				}
			}

			.btn_submit {
				width: 228rpx;
				height: 72rpx;
				background: #FD2A53;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}
	}

	.box_jinbi {
		padding: 54px 32rpx 140rpx;
		width: 100%;
		min-height: 100vh;

		.btn_box {
			position: fixed;
			padding-bottom: 30rpx;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 140rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(230, 230, 230, 0.5);
			padding: 12rpx 32rpx 32rpx;

			.left {
				text {
					font-weight: 500;
					font-size: 32rpx;
					color: #131313;
				}

				view {
					font-weight: 600;
					font-size: 32rpx;
					color: #FD2A53;
				}
			}

			.btn_submit {
				width: 228rpx;
				height: 72rpx;
				background: #FD2A53;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}

		.header {
			text {
				font-size: 32rpx;
				color: #999999;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin: 0 8rpx 0 1rpx;
			}

			view {
				font-weight: 600;
				font-size: 40rpx;
				color: #131313;
			}

		}

		.jinbi_content {
			flex-wrap: wrap;
			margin-top: 40rpx;

			.grid_item {
				width: 214rpx;
				height: 196rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				padding: 50rpx 0 30rpx;
				justify-content: space-between;
				margin-bottom: 16rpx;
				border: 2rpx solid transparent;

				.num {
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}

					text {
						font-size: 36rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.btn {
					width: 152rpx;
					height: 48rpx;
					background: linear-gradient(180deg, #FF5273 0%, #FD0031 100%);
					border-radius: 26rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 48rpx;
					text-align: center;
				}
			}

			#select {
				border: 2rpx solid #FD2A53;
			}
		}
	
		.jinbi-input {
			height: 96rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 0 32rpx;
			input {
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #333;
			}
		}
	
	}

	.popularize {
		padding: 54px 32rpx 32rpx;
		background: #eee;
		min-height: 100vh;

		.header {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 40rpx 32rpx;

			.title {
				font-size: 32rpx;
				color: #131313;
			}

			.pay_type_pop {
				margin-top: 30rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 32rpx;
						color: #131313;
					}
				}
			}

		}

		.pop_content {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 40rpx 90rpx;
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				color: #131313;
			}

			.input {
				padding: 40rpx 0;
				border-bottom: 2rpx solid #EEEEEE;

				text {
					font-weight: 500;
					font-size: 64rpx;
					color: #131313;
				}

				// .line {
				// 	width: 4rpx;
				// 	height: 64rpx;
				// 	background: #FD2A53;
				// }
				view {
					font-size: 32rpx;
					color: #333333;
					flex: 1;
				}

				#input-class {
					color: #666666;
				}
			}
		}

		.pay_type_choose {
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 32rpx 32rpx 64rpx;

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #131313;
				text-align: center;
			}

			.pay_type_content {
				background: #F8F8F8;
				border-radius: 16rpx;
				overflow: hidden;
				margin: 24rpx 0 64rpx;

				.list {
					height: 100rpx;
					padding: 0 32rpx;

					.left {
						text {
							font-size: 28rpx;
							color: #131313;
							margin-left: 16rpx;
						}

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.btn {
				width: 560rpx;
				height: 96rpx;
				background: #FD2A53;
				border-radius: 50rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
				margin: 0 auto;
			}
		}
	}

	.pay_type {
		// background: #ECECF4;
		border-radius: 24rpx;
		padding: 32rpx;
		margin: 0 0 40rpx;

		.pay_type_title {
			font-size: 28rpx;
			color: #131313;
		}

		.item {
			margin: 40rpx 0 0;

			.left {
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: 28rpx;
					color: #131313;
				}
			}

			.right {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.pay_type_choose {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 32rpx 32rpx 64rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			text-align: center;
		}

		.pay_type_content {
			background: #F8F8F8;
			border-radius: 16rpx;
			overflow: hidden;
			margin: 24rpx 0 64rpx;

			.list {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					text {
						font-size: 28rpx;
						color: #131313;
						margin-left: 16rpx;
					}

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 0 auto;
		}
	}

	.less-code {
		margin-top: 24rpx;
		.less-code-input {
			margin-left: 16rpx;
			width: 180rpx;
			height: 80rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			padding: 0 16rpx;
			input {
				text-align: center;
				width: 100%;
				height: 100%;
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.modal_less {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 80rpx 0;
		
		.modal_less_title {
			font-weight: 600;
			font-size: 40rpx;
			color: #FD2A53;
			line-height: 56rpx;
			text-align: center;
		}
		
		.model_btn {
			width: 560rpx;
			margin-top: 36rpx;
		
			.model_btn_child {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 28rpx;
			}
		
			.cancel {
				background: #F1F1F1;
				color: #333333;
			}
		
			.submit {
				background: #FD2A53;
				color: #FFF;
			}
		}
	}

</style>